<template>
	<view class="wrap">
		<view class="top flex flex-between flex-v-center">
			<view class="lt flex flex-v-center flex-between">
				<image src="../static/image/015.png" mode=""></image>
				<text>{{city}}</text>
			</view>
			<view class="rt">
				<!-- <text @click="changeCity">{{city}} <text class="change">^</text></text> -->
			</view>
		</view>
		<view class="main">
			<view class="main-list" v-for="(item,index) in list" :key="index">
				<view class="list flex flex-h-start">
					<label for="">名称：</label>
					<text>{{item.name}}</text>
				</view>
				<!-- <view class="list flex flex-h-start">
					<label for="">电话：</label>
					<text>{{item.tel}}</text>
				</view> -->
				<view class="address flex flex-between flex-v-center">
					<view class="address-lt flex flex-h-start flex-v-center">
						<label for="">地址：</label>
						<text>{{item.address}}</text>
					</view>
					<view class="address-rt" @click="goAddress(item.lat,item.lng,item.name)">
						<image src="../static/image/016.png" mode=""></image>
					</view>
				</view>
				<view class="list flex flex-h-start">
					<label for="">油价：</label>
					<text>10 / {{item.price.oil0}} 89 / {{item.price.oil89}} 92/{{item.price.oil92}}
						95/{{item.price.oil95}} 98/{{item.price.oil98}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qqmapsdk from '../libs/qqmap-wx-jssdk.min.js';
	// var QQMapWX = require('../libs/qqmap-wx-jssdk.min.js');
	export default {
		data() {
			return {
				city: '定位附近的位置...',
				loadingText: '加载中...',
				pageNum: 1,
				list: [],
				pageLength: 0,
				latitude:'',
				longitude:''
			}
		},
		onShow() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
	        this.url = curRoute;

		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.touch = true;
			if (this.pageLength > 0) {
				this.pageNum += 1;
				this.getInfo();
				this.loadingText = "加载中...";
			} else {
				this.loadingText = "没有更多数据啦"
				uni.showToast({
					title: "没有更多数据啦",
					icon: true
				})
			}
		},
		onLoad(options) {
			if (options.city) {
				this.city = options.city;
				console.log(this.city)
				this.list = [];
				this.pageNum = 1
				this.getInfo();
			} else {
				let _this = this
				const QQMapWX = new qqmapsdk({
					key: 'JJUBZ-YKHCJ-UKNFP-F6BRE-TVJZJ-OXFLU'
				});
				
				uni.getLocation({
					 type: 'gcj02', // 默认值为wgs84；可选值（ 1.wgs84 返回 gps 坐标，2.gcj02 返回可用于 wx.openLocation 的坐标）
				     success: function(res) {
						console.log('res', res);
						const latitude = res.latitude;
						const longitude = res.longitude;
                        _this.latitude = res.latitude;
						_this.longitude = res.longitude;
						// 解析地址
						QQMapWX.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: function(res) {
								console.log('解析地址成功');
								console.log(res);
								// 省
								// let province = res.result.ad_info.province;
								// 市
								let city = res.result.address;
								// console.log(province);
								_this.city = city;
								console.log(_this.city)
								_this.list = [];
								_this.pageNum = 1;
								_this.getInfo();
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: 'none'
								});
								console.log(res);
							}
							// complete: function(res) {
							//  console.log(res);
							// }
						});
					}
				});
			}



		},
		methods: {
			changeCity() {
				uni.navigateTo({
					url: './city'
				})
			},
			goAddress(latitude, longitude, name) {
				// let obj = this.bMapToQQMap(latitude,longitude)
				// console.log(this.bMapToQQMap(longitude,latitude));

				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name
				})
			},
			getInfo() {
				this.$https.request('/cli/js/oilByNear', true, {
					pageNum: this.pageNum,
					lat: this.latitude,
					lng:this.longitude
				}).then((res) => {
					
					if (res.code == 0) {
						let list = res.result;
						this.pageLength = list.length;
						this.list = this.list.concat(res.result);

					} else if(res.code == '201') {
						this.LoadingMsg("请先登录");
						setTimeout(function() {
							uni.hideLoading();
							uni.navigateTo({
								url:"./login/login"
							})
						}, 1000)
						
                        uni.setStorageSync('url', this.url);
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		.main {
			padding: 0 40rpx 30rpx 40rpx;

			.main-list {
				padding: 20rpx;
				box-shadow: #999 0rpx 0rpx 20rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.list {
					padding: 30rpx 0;

					label {
						font-family: HiraginoSansGB-W3;
						font-size: 26rpx;
						color: #333;
						display: flex;
						width: 100rpx;
					}

					text {
						font-family: HiraginoSansGB-W3;
						font-size: 26rpx;
						color: #333;
					}
				}

				.address {
					.address-lt {
						width: calc(100% - 40rpx);

						label {
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
							display: flex;
							width: 100rpx;
						}

						text {
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
							display: flex;
							width: calc(100% - 110rpx);
						}
					}

					.address-rt {
						width: 40rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}

					}
				}
			}

		}

		.top {
			padding: 30rpx 40rpx;

			.lt {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				text {
					font-family: HiraginoSansGB-W3;
					font-size: 26rpx;
					color: #333;
				}
			}

			.rt {
				text {
					font-family: HiraginoSansGB-W3;
					font-size: 26rpx;
					color: #333;
				}

				.change {
					font-family: HiraginoSansGB-W3;
					font-size: 40rpx;
					color: #333;
					position: relative;
					top: 12rpx;
				}
			}
		}
	}
</style>
